<template>
    <div class="form-bolist-edit-container">
        <div class="form-bolist-edit-title" v-if="!layerid">
            <div class="left-toolbar">
                <my-icon :type="'iconliebiao'" style="font-size: 24px;vertical-align: middle;"></my-icon>
                <span class="toobar-title">{{i18n('list.treeDialog','树形对话框')}}</span>
            </div>
            <div class="middle-toolbar"></div>
            <div class="right-toolbar">
<!--                <my-icon :type="'icontuihui'" style="font-size: 28px;color: rgba(255,255,255,0.8);"
                         :title="i18n('list.return','返回')"
                         @click="()=>{$router.go(-1)}"></my-icon>-->
            </div>
        </div>
        <rx-dialog @handOk="onSave" :oktext="oktext" btnalign="right" order="top" :showcancel="false" @cancel="cancel">
            <div v-if="currentName=='edit1' && getPkId!=null" slot="toolbar">
                <a-button type="primary" @click="onNext">{{i18n('list.nextStep','下一步')}}</a-button>
            </div>
            <div v-if="currentName=='edit2'" slot="toolbar">
                <a-button type="primary" @click="onBefore">{{i18n('list.previous','上一步')}}</a-button>
                <a-button type="primary" @click="showModal()">{{i18n('list.genPage','生成页面')}}</a-button>
                <a-button type="primary" @click="onEditHtml">{{i18n('list.editPage','编辑页面代码')}}</a-button>
            </div>
            <rx-layout>
                <div slot="center">
                    <component ref="current" :is="currentView" :pkId="getPkId" :layerid="layerid" :destroy="destroy"
                             :isDialog="getIsDialog" :curAppObj="getCurAppObj"></component>
                </div>
            </rx-layout>
            <a-modal :zIndex="99999" :title="i18n('generatePage','你确定要生成页面吗？')" v-model="remarkVisible">
                <template slot="footer">
                    <a-button key="back" @click="handleCancel">{{$ti18('rxForm.cancelBtn','取消')}}</a-button>
                    <a-button key="submit" v-if="!modal || !modal.saveHtml" type="primary" @click="handleOk(true)">
                        {{i18n('list.overLay','覆盖生成')}}
                    </a-button>
                    <a-button key="submit" type="primary" @click="handleOk">{{$ti18('rxForm.okBtn','确定')}}</a-button>
                </template>
                <p>{{$ti18('rxForm.notes','备注')}}：</p>
                <br/>
                <p>
                    <a-textarea sty v-model="remark" :auto-size="{ minRows: 4}"></a-textarea>
                </p>
            </a-modal>
        </rx-dialog>
    </div>
</template>
<script>
    import FormBoListTreeEdit1 from "./FormBoListTreeEdit1";
    import FormBoListTreeEdit2 from "./FormBoListTreeEdit2";
    import FormBoListEdit3 from "./FormBoListEdit3";
    import {Util, RxDialog} from "@lowcode/jpaas-common-lib";
    import FormBoListApi from '@/api/form/core/formBoList'

    export default {
        name: 'FormBoListTreeEdit',
        props: ["isDialog", "pkId", "layerid", "destroy"],
        components: {
            FormBoListTreeEdit1,
            FormBoListTreeEdit2,
            RxDialog
        },
        data() {
            return {
                oktext: this.$ti18('rxForm.saveBtn', '保存') + "&" + this.i18n('list.nextStep', '下一步'),
                currentName: "edit1",
                edit1: FormBoListTreeEdit1,
                edit2: FormBoListTreeEdit2,
                currentView: FormBoListTreeEdit1,
                remarkVisible: false,
                remark: "",
                modal: this
            }
        },
        computed: {
            getPkId() {
                let _id = this.pkId;
                return _id ? _id : this.$route.query.pkId ? this.$route.query.pkId : null;
            },
            getIsDialog() {
                let _id = this.isDialog;
                return _id ? _id : this.$route.query.isDialog ? this.$route.query.isDialog : '';
            },
            getCurAppObj() {
                let curAppObj = {};
                let appId = this.$route.query.appId;
                let appName = this.$route.query.appName;
                if (appId && appName) {
                    curAppObj = {appId: appId, appName: appName};
                }
                return curAppObj;
            }
        },
        created() {
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "formBoListDialog", key);
            },
            cancel() {
                Util.closeWindow(this, "cancel");
            },
            onSave(e, callback) {
                this.currentView.methods.handleSubmit(this, this.$refs.current, callback);
                e.loading = false;
            },
            onNext() {
                this.currentView = this.edit2;
                this.currentName = "edit2";
                this.oktext = this.$ti18('rxForm.saveBtn', '保存');
            },
            onBefore() {
                this.currentView = this.edit1;
                this.currentName = "edit1";
                this.oktext = this.$ti18('rxForm.saveBtn', '保存') + "&" + this.i18n('list.nextStep', '下一步');
            },
            onGenHtml(flag) {
                var self_ = this;
                this.onSave({}, function () {
                    FormBoListApi.genTreeHtml(self_.getPkId, self_.remark, flag).then(res => {
                        self_.onEditHtml();
                    })
                })
            },
            onEditHtml(html) {
                var self = this;
                var baseConf = {
                    curVm: this,
                    component: FormBoListEdit3,
                    data: {pkId: this.getPkId, showModal: this.showModal},
                    title: 'HTML' + this.i18n('list.preview', '代码预览'),
                    widthHeight: ['800px', '600px']
                };
                Util.open(baseConf, function (action) {
                    self.modal = null;
                });
            },
            showModal(self) {
                if (!this.getPkId) {
                    this.onGenHtml();
                } else {
                    if (self) {
                        this.modal = self;
                    }
                    this.remark = "";
                    this.remarkVisible = true;
                }
            },
            handleCancel() {
                this.remarkVisible = false;
            },
            handleOk(flag) {
                this.remarkVisible = false;
                if (this.modal && this.modal.saveHtml) {
                    this.modal.saveHtml(this.modal, this.remark);
                } else {
                    this.onGenHtml(flag);
                }
            }
        }
    }
</script>
<style>
    .footerToolBar button {
        margin-right: 6px;
    }

    .toolbuton {
        margin-right: 4px;
    }

    .form-bolist-edit-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .form-bolist-edit-title {
        height: 40px;
        align-items: center;
        display: flex;
        background-image: linear-gradient(90deg, #2f70ff 0%, #2ca8ff 100%), linear-gradient(#31539b, #31539b);
    }

    .form-bolist-edit-title .left-toolbar {
        font-size: 16px;
        color: #fff;
        padding-left: 6px;
    }

    .left-toolbar .toobar-title {
        margin-left: 6px;
        display: inline-block;
        vertical-align: middle;
    }

    .form-bolist-edit-title .middle-toolbar {
        flex: 1;
        text-align: center;
        font-size: 12px;
    }

    .form-bolist-edit-title .middle-toolbar i {
        font-size: 16px;
    }

    .form-bolist-edit-title .right-toolbar {
        margin-right: 10px;
    }

    .middle-toolbar .changeBotton {
        padding: 5px 8px;
        border-radius: 4px;
        display: inline-block;
        color: #fff;
        cursor: pointer;
    }

    .middle-toolbar .changeBotton i {
        vertical-align: -4px;
        margin-right: 6px;
    }

    .middle-toolbar .changeBotton.active {
        background-color: #fff;
        color: #2e86ff;
    }

    .middle-toolbar .changeBotton:first-child {
        margin-right: 20px;
    }
</style>
